<template>
	<view class="WalletRecord">
		<u-navbar title="分销记录" :placeholder="true" :auto-back="true" bg-color="transparent"></u-navbar>
		<view class="record_box">
			<view class="flex_box flex_row_between record_info" :style="{top: $u.addUnit(44 + $u.sys().statusBarHeight,'px'),}">
				<view class="flex_box flex_row_center flex_direction record_info_item">
					<view class="images">
						<u-image src="/static/memnum.png" width="36rpx" height="36rpx"/>
						<view class="record_info_text">会员数</view>
					</view>
					<view class="record_info_num">{{user}}</view>
				</view>
				<view class="flex_box flex_row_center flex_direction record_info_item">
					<view class="images">
						<u-image src="/static/fxamount.png" width="36rpx" height="36rpx"/>
						<view class="record_info_text">累计分销金额</view>
					</view>
					<view class="record_info_num">{{money}}</view>
				</view>
			</view>
			<view class="record_main">
				<view v-for="(item,index) in list" :key="index" class="flex_box flex_row_between record_item">
					<view class="flex_box flex_row_center flex_direction record_user">
						<u-image width="200rpx" height="210rpx" radius="24rpx" :src="item.image"></u-image>
					</view>
					<view class="record_content">
						<view class="flex_box record_option">
							<view class="record_option_text u-line-1">{{item.scenic_name}}</view>
						</view>
						<view class="flex_box record_option">
							<view class="record_option_title">所属:</view>
							<u-image :src="item.avatar" width="40rpx" height="40rpx" shape="circle" customStyle="{margin-left: 5px;}"/>
							<view class="record_option_text u-line-1">{{item.nickname}}</view>
						</view>
						<view class="flex_box record_option">
							<view class="record_option_title">卡号:</view>
							<view class="record_option_text u-line-1">{{item.card_cn}}</view>
						</view>
						<view class="flex_box record_option">
							<view class="record_option_title">时间:</view>
							<view class="record_option_text u-line-1">{{item.createtime}}</view>
						</view>
						<view class="record_price ">+<text>{{item.money}}</text></view>
					</view>
				</view>
			</view>
			<view v-if="listStatus==='nomore'&&list.length===0" class="empty_box">
				<u-empty mode="data" icon="/static/empty/data.png" text="亲，该时间段还没有流水记录哦！"></u-empty>
			</view>
			<block v-else>
				<u-loadmore :line="true" @loadmore="getMore" :status="listStatus"></u-loadmore>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		agentRecord,
	} from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				params: {
					page: 1,
				},
				list: [],
				listStatus: "loading",
				user: '',
				money: ''
			}
		},
		onLoad(options) {
			that = this;
			that.getList();
		},
		onReachBottom() {
			that.getMore();
		},
		methods: {
			// 获取列表
			getList(){
				agentRecord({params: uni.$u.deepMerge(that.params, {agent_token: that.agentInfo.agent_token})}).then(res => {
					that.user = res.data.user?res.data.user:0
					that.money = res.data.money?res.data.money:0
					let list = res.data.data;
					that.listStatus = list.length < res.data.per_page ? "nomore" : "loadmore";
					that.list = [...that.list,...list];
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			// 点击加载更多
			getMore(){
				that.listStatus==="loadmore"&&(that.params.page++,that.listStatus = "loading",that.getList());
			},
		}
	}
</script>

<style lang="scss" scoped>
	.WalletRecord{
		min-height: 100vh;
		background-color: #F6F8FA;
		.record_box{
			background: linear-gradient(135deg, #BBF4E9, #EDFFFC, #EDFFFC, #EDFFFC, #CCF6F5);
			position: absolute;
			top: 0px;
			.record_info{
				height: 146rpx;
				background-color: #fff;
				border-radius: 24rpx;
				margin: 200rpx 30rpx 0 30rpx;
				width: 695rpx;
				.record_info_item{
					width: 370rpx;
					.images {
						display: flex;
						gap: 20rpx;
						align-items: center;
					}
					.record_info_num{
						font-family: Source Han Sans CN;
						font-weight: bold;
						font-size: 48rpx;
						color: #333333;
					}
					.record_info_text{
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 32rpx;
						color: #999999;
					}
				}
			}
			.record_main{
				padding: 24rpx;
				.record_item{
					background: #FFFFFF;
					border-radius: 12rpx;
					margin-bottom: 24rpx;
					width: 703rpx;
					padding: 24rpx;
					.record_user{
						.record_user_name{
							font-size: 24rpx;
							color: #1E272E;
							font-weight: bold;
							line-height: 36rpx;
							margin-top: 12rpx;
						}
					}
					.record_content{
						width: 550rpx;
						padding: 0 0 0 20rpx;
						position: relative;
						.record_option{
							height: 40rpx;
							margin-bottom: 14rpx;
							.record_option_text {
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 28rpx;
								color: #333333;
							}
							.record_option_title{
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 28rpx;
								color: #AAAAAA;
							}
							.record_option_name{
								width: 340rpx;
								font-size: 28rpx;
								color: #1E272E;
								font-weight: bold;
							}
						}
					}
					.record_price{
						font-family: Source Han Sans CN;
						font-weight: bold;
						font-size: 28rpx;
						color: #4BD0C8;
						position: absolute;
						right: 10rpx;
						top: 64px;
					}
				}
			}
		}
	}
</style>
